
const { getPath } = require('./utils')

// 清空生成的文件目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 使用index.html模版
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 打包css到单独css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { merge } = require('webpack-merge');

const common = require('./webpack.config.common')

// 压缩代码
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            esModule: false,
                            importLoaders: 1,
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            esModule: false,
                            importLoaders: 1,
                        }
                    },
                    'postcss-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: getPath('../index.html'),
            filename: "index.html",
            minify: { // 压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符与换行符
                minifyCSS: true// 压缩内联css
            }
        }),
        new MiniCssExtractPlugin({
            filename:'[name].[hash].css'
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
})